<template>
	<view class="login-wrapper">
		<view class="login-title e-text-c">
			<view class="solid-bottom text-xl padding font-45">
				<text class="text-white text-bold">数智云仓 </text>
			</view>
			<view class="padding font-35">宁夏建材集团股份有限公司</view>
		</view>
		<view class="login-card font-35">
			<form @submit="formSubmit" class="login-form">

				<view class="section">
					<input class="font-35" id="userName" @blur='clearClose' @focus="setActive(1)" placeholder="账户" v-model="userName" />
					<text v-show="inputIndex==1" @click="clearName('userName')"
						class="dicon diconcuowuguanbiquxiao-yuankuang input-close"></text>
				</view>

				<view class="section">
					<input class="font-35" id="passWord" @blur='clearClose' @focus="setActive(2)" type="password" v-model="passWord"
						placeholder="密码" />
					<text v-show="inputIndex==2" @click="clearName('passWord')"
						class="dicon diconcuowuguanbiquxiao-yuankuang input-close"></text>
				</view>

				<view class="section" :class="inputIndex==3?'solid-bottom-blue':'' ">
					<picker @change="bindPickerChange" :value="activeIndex" :range="ipList" class="picker-wrap">
						<view class="font-35"> {{ ipList[activeIndex] || '请选择' }} </view>
						<text class="dicon diconxiangxiazhankai fr down-arrow"></text>
					</picker>
				</view>

				<view class="section verifycode-wrap" v-if="isverify">
					<input id="passWord"  type="text" v-model="Verifycode"
						placeholder="请输入验证码" />
					<image class="code-wrap" @click="getVerifycode" :src="safetyUrl" mode=""></image>
				</view>

				<view class="btn-area">
					<button hover-class="e-hover-btn" formType="submit" class="login-btn">登录</button>
					<view class="uni-flex e-flex-bwt">

						<view class="" style="padding: 10px 15px 10px 0;" @click="clearStorages">
							清除缓存
						</view>
						<view class="" style="padding: 10px 0px 10px 15px;" @click="openViews">
							网络配置
						</view>

					</view>
				</view>

			</form>
		</view>


		<view class="copyright" v-if="false">
			<text>©宁夏建材集团股份有限公司</text>
			<view class="version-wrap">
				当前版本：{{ version }}
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import api from '@/common/api.js'
	import md5 from '@/common/md5.js'
	import utils from '@/common/util.js'
	let _self, hostIp, clientID, token;
	
	// 13002910545  Npz123456   IP：82
	// tyys001   Tyye@123456 IP 81
	
	export default {
		computed: mapState(['userInfo']),
		data() {
			return {
				testPush: '',
				baseUrl: '',
				// userName: "13359211149", 201688  13002910545
				// passWord: "Mm123456",Kyq123456  Npz123456
				userName: "",
				passWord: "",
				allheight: "",
				activeIndex: 0,
				inputIndex: 0,
				// ipList: ['ewms.4008874005.com', '192.168.101.220', '139.9.245.83:8053'],
				ipList: ['61.133.208.158:81', '192.168.101.53:81', '139.9.245.83:8053','61.133.208.158:82',],
				isverify: false, // 是否开启验证码
				Verifycode: '' ,
				safetyUrl: "",
				// #ifdef APP-PLUS
				version: plus.runtime.version,
				// #endif
			};
		},

		onShow() {
			uni.getStorage({
				key: 'userName',
				success: function(res) {
					_self.userName = res.data;
				}
			});
			uni.getStorage({
				key: 'passWord',
				success: function(res) {
					_self.passWord = res.data;
				}
			});
			uni.getStorage({
				key: 'ipListStr',
				success: function(res) {
					_self.ipList = JSON.parse(res.data);
				}
			});

			uni.getStorage({
				key: 'selectIndex',
				success: function(res) {
					_self.activeIndex = res.data;
				}
			});
		},
		onLoad() {
			_self = this;
		},
		//  返回事件监听
		onBackPress(options) {
			if (options.from === 'backbutton') {
				return true;
			}
			return false;
		},
		methods: {
			...mapMutations(['longinSuccessReduce', 'setUserInfo']), // 引入 store中的reduce方法
			clearName(id) {
				this[id] = ''
			},
			clearClose() {
				this.inputIndex = ''
			},

			formSubmit: function(e) {
				var formData = {
					account: _self.userName,
					password: _self.passWord
				};
				// console.log(formData);
				if (!formData.account || !formData.password) {
					this.$utils.showTips('账户和密码不能为空')
				} else if (!_self.ipList[_self.activeIndex] || _self.ipList[_self.activeIndex] == '请选择服务器地址') {
					this.$utils.showTips('请检查网络配置和服务器地址')
					return setTimeout(() => {
						uni.navigateTo({
							url: 'network'
						});
					}, 2000)
				} else if (this.isverify && this.Verifycode == "") {
					return this.$utils.showTips("请输入验证码");
				}

				uni.showLoading({
					title:'努力加载中...'
				})
				let loginData = {
					Account: formData.account,
					DeviceType: 0,
					PhoneIMEI: '',
					LoginUserType: "1",
					checked: true,
					isverify: this.isverify,
					Verifycode: this.Verifycode,
					Espassword: this.$utils.aesJmEncrypt(formData.password),
				};
				// console.log(loginData);
				hostIp = "http://" + _self.ipList[_self.activeIndex];
				getApp().globalData.BaseURL = hostIp
				let URL = hostIp + '/api/PhoneLogin/login'
				// console.log(URL);
				this.axios({
						url: URL,
						data: loginData,
					})
					.then((res) => {
						let {
							IsSuccess,
							UserModel,
							ProjectName,
							AuthModel
						} = res;
						getApp().globalData.Token = UserModel.Ticket;
						getApp().globalData.UserId = UserModel.UserId;
						getApp().globalData.Account = UserModel.Account;
						_self.setUserInfo(UserModel);
						// console.log(258, res);
						uni.setStorage({
							key: 'baseUrl',
							data: hostIp
						});
						uni.setStorage({
							key: 'selectIndex',
							data: _self.activeIndex + ''
						});
						uni.setStorage({
							key: 'userId',
							data: UserModel.UserId
						});
						uni.setStorage({
							key: 'token',
							data: UserModel.Ticket
						});
						uni.setStorage({
							key: 'userName',
							data: UserModel.Account
						});
						uni.setStorage({
							key: 'passWord',
							data: formData.password
						});

						uni.setStorage({
							key: 'userInfo',
							data: JSON.stringify(UserModel)
						});
						let authArr = '';
						if (AuthModel) {
							AuthModel.forEach((item) => {
								authArr += item.ENCODE + '&';
							})
						}
						_self.getUserInfo(UserModel.UserId, hostIp, authArr)
					}).catch((err) => {
						console.log(err);
						uni.hideLoading()
						if (err.Result == "OneUpdatePassword") {
							this.$utils.showTips(err.Message);
							setTimeout((res) => {
								uni.navigateTo({
									url: "/pages/tab05/editPass?UserName=" + saveData.Account,
								});
							}, 2000);
							return;
						}
						if (err.Message.indexOf("被锁定") > -1) {
							this.Message = err.Message;
						} else if (err.IsShowCode) {
							this.getVerifycode();
							this.isverify = true;
						}
					});

			},

			getVerifycode() {
				hostIp = "http://" + _self.ipList[_self.activeIndex];
				getApp().globalData.BaseURL = hostIp
				let Verify = "/api/BaAuthData/VerifyCode";
				this.Verifycode = "";
				this.axios({
					url: Verify,
					method: "GET",
				}).then((res) => {
					this.safetyUrl = res.Result;
				});
			},

			openViews: function() {
				uni.navigateTo({
					url: 'network'
				});
			},
			clearStorages() {
				uni.clearStorage();
				uni.showToast({
					title: '缓存已清理！',
					icon: 'none',
					duration: 1000
				});
			},

			bindPickerChange: function(e) {
				_self.activeIndex = e.target.value
				_self.inputIndex = 3
			},
			setActive(i) {
				_self.inputIndex = i
			},

			getUserInfo(id, baseUrl, authArr) {
				let data = {
					userId: id
				};
				this.axios({
					url: baseUrl + '/api/APPCommon/GetCurUserInfo',
					data: data
				}).then((res) => {
					let {
						Result
					} = res
					// console.log(33, res)
					Result.BaseURL = baseUrl;
					Result.UserId = id;
					Result.Account = Result.ACCOUNT;
					Result.authModel = authArr;
					let storeData = {
						userInfo: Result,
						authModel: authArr,
						baseUrl: baseUrl
					}
					_self.longinSuccessReduce(storeData)
					uni.switchTab({
						url: '/pages/tab01/index'
					})
					// #ifdef APP-PLUS
					setTimeout(r => {
						_self.$utils.handleUpdate(baseUrl)
					}, 1000)
					// #endif
					
					
				})
			}

		}
	}
</script>

<style lang="scss">
	.login-wrapper {
		width: 100%;
		height: 100vh;
		background-image: linear-gradient(to top, #1E9FFF 0%, #00c6fb 100%);
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.login-title {
		padding: 10vh;
		color: #FFFFFF;
	}

	.e-text-c {
		text-align: center;
	}

	.e-flex-bwt {
		display: flex;
		justify-content: space-between;
		font-size: 35rpx;
		color: #00BFFF;
		margin-top: 20upx;
	}

	.login-card {
		width: 80%;
		margin: 0 10%;
		background: #FFFFFF;
		border-radius: 20upx;
		box-shadow: 0 0upx 16upx #AAAAAA;

		.section {
			position: relative;

			.input-close {
				position: absolute;
				right: 0;
				top: 0;
				color: #555555;
			}

			.code-wrap {
				width: 200rpx;
				height: 70rpx;
				position: absolute;
				right: 0;
				top: -15rpx;
			}
		}

		.section:focus-within {
			border-bottom: 1rpx solid #007AFF;
		}
	}

	.login-form {
		margin: 20upx;
	}

	.btn-area {
		margin: 60upx 40upx 0upx 40upx;
	}

	.login-btn {
		border: none;
		color: #FFFFFF;
		background-image: linear-gradient(to left, #1E9FFF 0%, #00c6fb 100%) !important;
	}

	.section {
		margin: 40upx;
		border-bottom: 2upx solid #eee;
	}

	.setting-btn {
		width: 80%;
		margin: 40upx 10%;
	}

	.setting-btn button {
		background: none;
		border: 1px solid #eee;
		color: #EEEEEE;
	}

	.copyright {
		width: 100%;
		color: #FFFFFF;
		font-size: 20upx;
		position: absolute;
		bottom: 60upx;
		text-align: center;
		background: transparent;
	}

	.version-wrap {
		font-size: 20upx;
	}

	.e-hover-btn {
		opacity: 0.6;
	}

	.picker-wrap {
		width: 100%;
		padding-bottom: 20upx;
		margin-top: 10upx;
	}

	.down-arrow {
		margin-top: -30upx;
	}

	/* .section input{caret-color:red;} */
</style>
